<template>
	<view class="container">
		<u-navbar
			title="提现账号" 
			:background="{backgroundColor: '#fff'}"
		></u-navbar>
		<!-- :empty-view-text="emptyText" -->
		<!-- :empty-view-img="emptyImg" -->
		<z-paging
			ref="paging"
			v-model="accountList"
			@query="getList" 
			auto-show-back-to-top 
			:hide-empty-view="true"
		>
			<!-- 占位 -->
			<template v-slot:top>
				<view :style="{'margin-top': sHeight}"></view>
			</template>
			<!-- 如果没有账号数据 -->
			<view class="content" v-if="accountList.length==0">
				<view 
					class="addBtn flex justify-center align-center"
					@tap.stop="handleClick"
				>+添加账号</view>
			</view>
			<!-- 有账号数据 -->
			<view class="content" v-else>
				<view 
					class="content_item flex justify-btw align-center"
					v-for="(item, index) in accountList"
					:key="index"
					@tap.stop="toSelect(item.id)"
				>
					<view class="flex_clm justify-btw align-start">
						<text class="text_1" style="margin-bottom: 8rpx;">
							{{ item.type==1 ? '微信账号' : item.type==2 ? '支付宝账号' : item.type==3 ? '银行卡账号' : '--' }}
						</text>
						<text class="text_2">账号：{{ item.account }}</text>
					</view>
					<view class="">
						<!-- 编辑按钮 -->
						<image
							v-if="!ptype"
							style="width: 52rpx;height: 52rpx;margin-right: 10rpx;"
							:src="'/static/images/edit_btn.png'" 
							mode="aspectFill"
							@tap.stop="handleEdit(item.id)"
						></image>
						<!-- 选择按钮 -->
						<image 
							v-if="ptype"
							style="width: 36rpx;height: 36rpx;" 
							:src="targetId == item.id ? '/static/images/icon_add_select.png' : '/static/images/icon_add_default.png'" 
							mode=""
						></image>
						<!-- 删除按钮 -->
						<image
							v-else
							style="width: 52rpx;height: 52rpx;" 
							:src="'/static/images/del_btn.png'" 
							mode="aspectFill"
							@tap.stop="()=>{ delId = item.id; delShow = true }"
						></image>
					</view>
				</view>
			</view>
			<!-- 底部占位 -->
			<template #bottom>
				<view style="height: 110rpx;"></view>
			</template>
		</z-paging>
		<!-- 底部按钮 -->
		<view v-if="accountList.length">
			<view class="btn_wrapper" v-if="ptype">
				<view class="btn_left"  @tap.stop="handleClick()">添加账号</view>
				<view class="btn_right"  @tap.stop="handleSubmit">确认</view>
			</view>
			<view class="btn_wrapper" v-else>
				<view 
					class="btn_left_all" 
					@tap.stop="handleClick()"
				>添加账号</view>
			</view>
		</view>
		<!-- 删除确认框 -->
		<u-modal 
			v-model="delShow" 
			@confirm="handleDel" 
			@cancel="delShow = false" 
			:mask-close-able="true"
			:show-cancel-button="true"
			content="确认删除？"
		></u-modal>
	</view>
</template>

<script setup>
import {getCurrentInstance, ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
const {proxy} = getCurrentInstance()
const accountList = ref([])  //提现账号列表
const targetId = ref('') //选中的项id
const delId = ref('') //要删除的
const delShow = ref(false)
const ptype = ref('')
// const pageType = ref('')
const sHeight = ref('')
const emptyText = '没有更多了'
const empty = 'http://jinjukeji.oss-cn-hangzhou.aliyuncs.com/cardoctor1663661926837.png'

onLoad((option)=>{
	uni.$on('add_success', (type)=>{
		proxy.$refs.paging.reload();
		setTimeout(()=>{
			proxy.tui.toast(type=='add' ? '新增成功' : type=='edit' ? '编辑成功' : '')
		}, 800)
	})
	getStatusHeight()
	ptype.value = option.type
	// pageType.value = option.pageType
	
})
// 
function handleDel(id){
	let query = {
		id: delId.value
	}
	proxy.api.deleteWithdrawal(query).then(res=>{
		proxy.$refs.paging.reload();
		setTimeout(()=>{
			proxy.tui.toast('删除成功')
		}, 800)
	})
}
function getList(pageNo, pageSize){
	let query = {
		// pageNo: pageNo,
		// pageSize,
		type: ptype.value
	}
	proxy.api.withdrawalAccountList(query).then(res=>{
		proxy.$refs.paging.complete(res.data.data);
	})
}

function getStatusHeight() {
		sHeight.value = uni.getSystemInfoSync().statusBarHeight + 44 + 'px';
	}

// 添加账号
function handleClick(){
	uni.navigateTo({
		url:`/pages/setting/addAccount?title=add&id=${0}&type=${ptype.value||''}`
	})
}
// 编辑账号
function handleEdit(id){
	uni.navigateTo({
		url:`/pages/setting/addAccount?title=edit&id=${id}&type=${ptype.value||''}`
	})
}
// 单选
function toSelect(id){
	targetId.value = id
}
// 确认选中
function handleSubmit(){
	if(!targetId.value){
		proxy.tui.toast('请选择提现账号')
		return
	}
	uni.$emit('selected_account', targetId)
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.text_1{@include str(30rpx, bold, #333); line-height: 42rpx;}
	.text_2{@include str(24rpx, 400, #999); line-height: 33rpx;}
	.container {
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		background-color: $uni-bg-color-grey;

		.content {
			.addBtn{
				width: 690rpx;
				height: 88rpx;
				background: $uni-color-primary;
				border-radius: 50rpx;
				@include str(32rpx, 500, #fff);
				margin-left: 30rpx;
				margin-top: 592rpx;
			}
			&_item{
				background-color: #fff;
				padding: 34rpx 30rpx 31rpx 30rpx;
				margin-bottom: 2rpx;
			}
		}
	}
	.btn_wrapper{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		box-shadow: 0px -6px 16px rgba(0,0,0,0.08);
		box-sizing: border-box;
		padding: 19rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btn_left {
			width: 344rpx;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;
			box-sizing: border-box;
			color: $uni-color-primary;
			border: 1rpx solid $uni-color-primary;
			border-radius: 40rpx;
		}
		.btn_left_all {
			width: 690rpx;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: $uni-color-primary;
			box-sizing: border-box;
			color: #fff;
			border: 1rpx solid $uni-color-primary;
			border-radius: 40rpx;
		}
		.btn_right {
			width: 344rpx;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: $uni-color-primary;
			color:#fff;
			border-radius: 40rpx;
		}
	}
</style>